<template>
    <div @click="change">change target</div>
    <el-popover v-model="visible" trigger="click">
  <template #reference>
    <!-- 动态组件加载 -->
    <component 
      :is="comMaps[id].component || 'div'" 
      v-bind="comMaps[id].props"
    />
  </template>
  <template #default>
    <div>aaaaa</div>
    <div>breadcrumb</div>
  </template>
</el-popover>
</template>
<script>

export default {
  data() {

    return {
        id:'4',
        comMaps:{
            4: {
              component: 'ElButton', // 注册的组件名
              props: { 
                type: 'primary',
                icon: 'search',
                style:{ position:'absolute', left:'50%', top:'50%' }
              },
            },
            5: {
              component: 'ElButton', // 注册的组件名
              props: { 
                type: 'primary',
                icon: 'search',
                style:{ position:'absolute', left:'50%', top:'80%' }
              }
            }
      }
    }
  },
  methods:{
    change(){
        this.id = '5';
        console.log(this.comMaps['5']);
    }
  }
}
</script>